<template>
  <div class="home">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item of playlists" :key="item.id">
        <img
          class="item"
          v-lazy="item.coverImgUrl"
          @click="handleJump(item.id)"
          alt=""
        />
        <p>{{ item.name }}</p>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      playlists: [],
      loading: false,
      finished: false,
    };
  },
  mounted() {},
  methods: {
    onLoad() {
      var offset = this.playlists.length;
      setTimeout(() => {
        axios
          .get(
            `http://122.112.161.135:3000/top/playlist?offset=${offset}&limit=20`
          )
          .then((res) => {
            var playlists = this.playlists.concat(res.data.playlists);
            this.playlists = playlists;
            this.loading = false;
          });
      }, 500);
    },
    handleJump(id) {
      console.log(id);
      this.$router.push(`/detail/${id}`)
    },
  },
};
</script>

<style scoped>
.item {
  width: 150px;
  height: 150px;
}
.home {
  display: flex;
  flex-wrap: wrap;
}
.van-cell {
  width: 170px !important;
}
.van-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>